<template>
  <div class="page-container">
    <div :id="myChart" :style="{width: '100%', height: '500px'}"></div>
    <p>注意：</p>
    <p>1.安装依赖：npm install echarts --save</p>
    <p>2.在main.js文件引入echarts：</p>
    <p>import * as echarts from 'echarts'</p>
    <p>Vue.prototype.$echarts = echarts</p>
  </div>
</template>
<script>
export default {
  name: 'Echart', // Echart
  data () {
    return {
      firstList: [],
      secList: []
    };
  },
  computed: {
    // 动态id，防止多开tab时存在相同的id导致EChart加载不出来
    myChart () {
      return Math.random() + 'myChart';
    },
  },
  mounted () {
    this.getEchartData();
    this.drawLine();
  },
  methods: {
    getEchartData() {
      const firstList = [];
      const secList = [];
      for (let i = 0; i < 12; i++) {
        const randomNum1 = Math.floor(Math.random() * 100);
        const randomNum2 = Math.floor(Math.random() * 100);
        firstList.push(randomNum1);
        secList.push(randomNum2);
      }
      this.firstList = firstList;
      this.secList = secList;
    },
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById(this.myChart));
      // 绘制图表
      myChart.setOption(
        {
          title: {
            text: 'EChart实例'
          },
          tooltip: {},
          legend: {
            data: [
              {
                name: '计划',
                icon: 'roundRect'
              },
              {
                name: '实际',
                icon: 'roundRect'
              }
            ]
          },
          xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            type: 'value',
            // name: '(次数)',
            // min: 0,
            // max: 1000,
            // interval: 100,
            // axisLabel: {
            //   show: true,
            //   textStyle: {
            //     color: '#808080', // x轴data 的颜色
            //     fontSize: 14 // 让字体变大
            //   },
            //   formatter: '{value}',
            // },
            axisLine: { // 坐标线
              show: false,
            },
            axisTick: { // 刻度
              show: false // 不显示刻度线
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: ['#E9E9E9'], // 分割线的颜色
              }
            }
          },
          series: [
            {
              name: '计划',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#3AA1FF'
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              data: this.firstList,
            },
            {
              name: '实际',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#4ECB73'
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              data: this.secList
            },
          ],
          grid: {
            left: '40',
            right: '40',
            top: '60',
            bottom: '40',
            containLabel: true
          }
        }
      );
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        };
      }, 200);
    },
  }
};
</script>
<style scoped lang="scss">
</style>
